<template>

  <div>
    <el-row style="">
      <el-col :span="24">

        <el-descriptions class="margin-top" title=""  :column="1" :size="size" :contentStyle="CS" :label-style="LS" border>
          <el-descriptions-item label="上级机器">
            <span v-if="formOpsComputerServer.parentId === '-1'">当前顶级节点，无父级</span>
            <span v-else>{{formOpsComputerServer.parentName}}</span>
          </el-descriptions-item>
        </el-descriptions>



        <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border>
          <el-descriptions-item label="机器名称(别名)">{{formOpsComputerServer.name}}</el-descriptions-item>
          <el-descriptions-item label="计算机主机名">{{formOpsComputerServer.hostName}}</el-descriptions-item>

          <el-descriptions-item label="使用状态">
            <el-tag type="success" size="mini" v-if="formOpsComputerServer.useStatus === 1">使用</el-tag>
            <el-tag type="info" size="mini" v-else-if="formOpsComputerServer.useStatus === 9">停用</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="云主机类型">
            <el-tag type="warning" size="mini" v-if="formOpsComputerServer.cloudTypeName">{{formOpsComputerServer.cloudTypeName}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="系统类型">
            <el-image class="os-icon" v-if="formOpsComputerServer.os === 1" fit="contain" :src="require('@/assets/images/os/linux.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 2" fit="contain" :src="require('@/assets/images/os/Windows.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 3" fit="contain" :src="require('@/assets/images/os/mac.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 4" fit="contain" :src="require('@/assets/images/os/unix.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 9" fit="contain" :src="require('@/assets/images/os/computer.png')"/>

            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 5" fit="contain" :src="require('@/assets/images/os/yhql.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 6" fit="contain" :src="require('@/assets/images/os/tx.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 7" fit="contain" :src="require('@/assets/images/os/deepin-1.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 8" fit="contain" :src="require('@/assets/images/os/computer.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 10" fit="contain" :src="require('@/assets/images/os/computer.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 11" fit="contain" :src="require('@/assets/images/os/computer.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 12" fit="contain" :src="require('@/assets/images/os/hm.png')"/>
            <el-image class="os-icon" v-else-if="formOpsComputerServer.os === 13" fit="contain" :src="require('@/assets/images/os/zbql.png')"/>
            {{formOpsComputerServer.osTypeName}}
          </el-descriptions-item>
          <el-descriptions-item label="系统版本">
            <el-tag size="mini" v-if="formOpsComputerServer.osVersion">{{formOpsComputerServer.osVersion}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="是否虚拟机">
            <el-tag size="mini" v-if="formOpsComputerServer.vm === 1">虚拟机</el-tag>
            <el-tag type="success" size="mini" v-else-if="formOpsComputerServer.vm === 0">物理机</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="特殊机器">
            <el-tag type="success" size="mini" v-if="formOpsComputerServer.specialName">{{formOpsComputerServer.specialName}}</el-tag>
          </el-descriptions-item>

          <el-descriptions-item label="关键节点">
            <el-tag type="warning" size="mini" v-if="formOpsComputerServer.linchpin === 1">关键节点</el-tag>
            <el-tag type="info" size="mini" v-else-if="formOpsComputerServer.linchpin === 0">普通节点</el-tag>
          </el-descriptions-item>

        </el-descriptions>




        <el-descriptions class="margin-top" title=""  :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >
          <el-descriptions-item label="ip地址">
            <template v-if="formOpsComputerServer.ips && formOpsComputerServer.ips.trim()">
              <el-tag type="danger" size="mini" v-for="(ip, index) in formOpsComputerServer.ips.split(',').filter(ip => ip.trim())"  :key="index" style="margin-right: 5px; margin-bottom: 5px;">
                {{ ip.trim() }}
              </el-tag>
            </template>
          </el-descriptions-item>
          <el-descriptions-item label="存放的位置">{{formOpsComputerServer.storageLocation}}</el-descriptions-item>
          <el-descriptions-item label="磁盘说明">{{formOpsComputerServer.disk}}</el-descriptions-item>
        </el-descriptions>



        <el-descriptions class="margin-top" title=""  :column="2" :size="size" :contentStyle="CS" :label-style="LS" border >
          <el-descriptions-item label="CPU信息">{{formOpsComputerServer.cpu}}</el-descriptions-item>
          <el-descriptions-item label="计算机核心数"><span v-if="formOpsComputerServer.core">{{formOpsComputerServer.core}} 核</span></el-descriptions-item>
          <el-descriptions-item label="网络上行">
            <span v-if="formOpsComputerServer.accessNetworkSizeUp">
              <el-image class="heartbeat-icon" fit="contain" :src="require('@/assets/images/os/heartbeat.png')"/>
              {{formOpsComputerServer.accessNetworkSizeUp}} M
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="网络下行">
            <span v-if="formOpsComputerServer.accessNetworkSizeDown">
              <el-image class="heartbeat-icon" fit="contain" :src="require('@/assets/images/os/heartbeat1.png')"/>
              {{formOpsComputerServer.accessNetworkSizeDown}} M
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="计算机内存大小"><span v-if="formOpsComputerServer.memory">{{formOpsComputerServer.memory}} G</span></el-descriptions-item>
        </el-descriptions>

        <el-descriptions class="margin-top" title=""  :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >
          <el-descriptions-item label="详情说明">{{formOpsComputerServer.description}}</el-descriptions-item>
        </el-descriptions>


        <!--<el-descriptions class="margin-top" title=""  :column="1" :size="size" :contentStyle="CS" :label-style="LS" border >-->
        <!--  <el-descriptions-item label="访问登录信息1">{{formOpsComputerServer.access1}}</el-descriptions-item>-->
        <!--  <el-descriptions-item label="访问登录信息2">{{formOpsComputerServer.access2}}</el-descriptions-item>-->
        <!--  <el-descriptions-item label="访问登录信息3">{{formOpsComputerServer.access3}}</el-descriptions-item>-->
        <!--</el-descriptions>-->



      </el-col>
    </el-row>


  </div>


</template>

<script>

import {getFullDate, getFullTime} from "@/utils/utils";

export default {
  name: "OpsAppProblemDetailed",
  data(){
    return {
      // 默认值，进入页面后的值
      defaultValue: {
        // 弹出框标题
        title: '详情',
      },
      // 列表的尺寸
      size: 'medium',
      // tag的大小
      mini: 'mini',
      // tag 的大小
      tagSize: 'small',
      // 展示的数据
      formOpsComputerServer: {
        id: null,
        siteId: null,
        name: null,
        ips: null,
        access1: null,
        access2: null,
        access3: null,
        cloudType: null,
        vm: null,
        cpu: null,
        core: null,
        memory: null,
        disk: null,
        accessNetworkSizeUp: null,
        accessNetworkSizeDown: null,
        parentId: null,
        parentIds: null,
        hostName: null,
        special: null,
        useStatus: null,
        storageLocation: null,
        os: null,
        osVersion: null,
        linchpin: null,
        description: null,
        createTime: null,
        updateTime: null,
        updateId: null,
        createId: null,
        delType: null,
      },
      // 描述列表的css
      CS: {
        // 'text-align': 'center',  //文本居中
        'min-width': '250px',   //最小宽度
        'word-break': 'break-all'  //过长时自动换行
      },
      // 描述列表的css
      LS: {
        // 'color': '#000',
        // 'text-align': 'center',
        'font-weight': '600',
        // 'height': '40px',
        // 'background-color': 'rgba(255, 97, 2, 0.1)',
        'min-width': '110px',
        'word-break': 'keep-all'
      },
    }
  },
  methods: {
    /**
     * 打开弹出框
     * @param obj 人员信息
     */
    openComputerServerDetailed(obj){
      this.formOpsComputerServer = obj
    },
    /**
     * 转换时间戳为时间格式
     */
    getTime(item){
      return getFullTime(item)
    },
    /**
     * 时间转日期
     * @param item 要转换的时间戳
     * @return {string}
     */
    getFullDate(item){
      return getFullDate(item)
    },
  },
}
</script>

<style scoped>

  .margin-top {
    margin-top: 10px;
  }

  .os-icon{
    width: 20px;
    height: 18px;
    vertical-align: middle;
    margin-right: 5px;
  }

  .heartbeat-icon {
    width: 100px;
    height: 30px;
    vertical-align: middle;
    margin-right: 5px;
  }


</style>

